html,
body,
input,
textarea,
button {
  font-family: var(--font-interface);
  font-size: var(--ui-font-size);
  font-weight: var(--normal-weight);
  line-height: var(--line-height);
  -webkit-font-smoothing: var(--default-font-smoothing);
}

strong {
  font-weight: var(--bold-weight);
}

body:not(.native-scrollbars) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  
  .modal .vertical-tab-header::-webkit-scrollbar-track,
  .mod-left-split .workspace-tabs ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border: 3px solid transparent;
    min-height: 40px;
  }
}

textarea,
select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"] {
  @include radius-m;

  font-size: var(--ui-font-size);
  padding: 6px 11px;
  border-color: var(--shade-10);
  height: auto;
  transition: 100ms box-shadow ease, 100ms border ease;

  .theme-dark & {
    border-color: var(--shade-20);
  }
}

textarea:focus,
select:focus,
input[type="text"]:active,
input[type="search"]:active,
input[type="email"]:active,
input[type="password"]:active,
input[type="number"]:active,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
  border-color: hsla(var(--accent-hsl), 0.5);
  box-shadow: inset 0 0 0 2px hsla(var(--accent-hsl), 0.5);
}

textarea {
  padding: 8px 10px;
}

.setting-item-control button,
button,
button.mod-cta {
  @include radius-m;

  line-height: 1.3;
  font-size: var(--ui-font-size);
  font-weight: var(--medium-weight);
  color: var(--text-normal);
  padding: 4px 14px;
  background-color: var(--shade-0);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08);
  margin-right: 5px;

  &:last-of-type {
    margin-right: 0;
  }

  &.mod-cta:hover {
    color: var(--text-normal);
    background-color: var(--shade-0);
  }

  .theme-dark & {
    color: #dfdedf;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1),
      inset 0px 1px 1px rgba(255, 255, 255, 0.3);
    background-color: var(--shade-50);

    &.mod-cta:hover {
      color: #dfdedf;
      background-color: var(--shade-50);
    }
  }
}

.dropdown {
  font-size: inherit;
  font-family: inherit;
  font-weight: var(--medium-weight);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  color: var(--text-normal);
  padding: 4px 28px 4px 14px;
  background-color: var(--shade-0);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-m);
}

.theme-dark .dropdown {
  color: #dfdedf;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1),
    inset 0px 1px 1px rgba(255, 255, 255, 0.3);
  background-color: var(--shade-50);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

.theme-dark .dropdown:focus,
.dropdown:focus {
  border-color: rgba(0, 0, 0, 0.12);
}

input[type="range"] {
  width: 120px;
  -webkit-appearance: none;
  background-color: var(--shade-plus-darker);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-m);
  height: 4px;
  margin: 0;
  padding: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 20px;
  width: 8px;
  height: 20px;
  cursor: ew-resize;
  background: #fff;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.07);
  position: relative;
  top: -8px;
}

.theme-dark input[type="range"]::-webkit-slider-thumb {
  background-color: #c8c8c8;
}

input[type="range"] {
  outline: none;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1em;
  height: 1em;
  padding: 0;
  margin: 0;
  background: var(--shade-0);
  border: 1px solid var(--shade-40);
  box-sizing: border-box;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  filter: none;

  .theme-dark & {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.28) 100%
    );
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
      inset 0px 0.5px 0px rgba(255, 255, 255, 0.15);
    border-color: var(--shade-5);
  }

  &:focus,
  &:hover {
    outline: 0;
  }
  .is-flashing &:checked,
  &:checked {
    background: hsl(var(--accent-hsl));
    box-shadow: none;
    border-color: transparent;
  }

  .is-flashing &:checked:before,
  &:checked:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none" viewBox="0 0 8 8"><path fill="white" d="M3.215 7.785c.336 0 .594-.12.77-.383L7.59 2a.955.955 0 00.176-.535c0-.469-.368-.82-.848-.82-.328 0-.535.117-.734.43l-2.98 4.663-1.485-1.742A.795.795 0 001.07 3.7c-.484 0-.84.352-.84.824 0 .215.06.387.243.598L2.48 7.453c.2.23.434.332.735.332z"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 71%;
    line-height: 1;
    width: 100%;
    height: 100%;
    content: " ";
    display: block;
  }
}
